<template>
    <el-form :inline="true" :model="formData">
        <el-form-item label="分类">
            <CategoryTree  v-model:modelValue="formData.categoryId"></CategoryTree>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="formData.status" clearable style="width: 100px;">
                <el-option v-for="item in productstatusOptions" :key="item.code" :label="item.message"
                    :value="item.code" />
            </el-select>
        </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="formData.name" placeholder="请输入关键字" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="port" label="编号" width="80" />
        <el-table-column prop="name" label="名称" width="100" />
        <el-table-column prop="subName" label="副标题" show-overflow-tooltip width="100" />
        <el-table-column prop="categoryId" label="分类" width="80" />
        <el-table-column prop="status" label="状态" width="80" />
        <el-table-column prop="img" label="图片" width="80">
            <template #="scope">
                <img :src="scope.row.img[0]" class="img">
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="240">
            <template #default="scope">
                <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteClick(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br />
    <el-pagination background :page-size="pageData.pageSize" @change="pageChange" layout="prev, pager, next"
        :total="pageData.total" />
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { productApi,categoryApi,enumApi } from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'
            
import CategoryTree from '@/components/CategoryTree.vue'

const router = useRouter()

const tableData = ref<any>(
    [
        {
            port: 0,
            name: "小米SU7",
            subName: "小米SU7副标题",
            status: 1,
            brief: "小米SU7备注",
            tags: "小米，新能源",
            categoryId: 2,
            img: "src\assets\miku.png"
        },
        {
            port: 1,
            name: "小米SU7",
            subName: "小米SU7副标题",
            status: 1,
            brief: "小米SU7备注",
            tags: "小米，新能源",
            categoryId: 2,
            img: "src\assets\miku.png"
        },
        {
            port: 2,
            name: "小米SU7",
            subName: "小米SU7副标题",
            status: 1,
            brief: "小米SU7备注",
            tags: "小米，新能源",
            categoryId: 2,
            img: "src\assets\miku.png"
        },
        {
            port: 3,
            name: "小米SU7",
            subName: "小米SU7副标题",
            status: 1,
            brief: "小米SU7备注",
            tags: "小米，新能源",
            categoryId: 2,
            img: "src\assets\miku.png"
        },
        {
            port: 4,
            name: "小米SU7",
            subName: "小米SU7副标题",
            status: 1,
            brief: "小米SU7备注",
            tags: "小米，新能源",
            categoryId: 2,
            img: "src\assets\miku.png"
        },
        {
            port: 5,
            name: "小米SU7",
            subName: "小米SU7副标题",
            status: 1,
            brief: "小米SU7备注",
            tags: "小米，新能源",
            categoryId: 2,
            img: "src\assets\miku.png"
        },

    ]
)
const formData = reactive({ categoryId: "",  name: "", status: 0 })

const pageData = reactive({
    total: 0,
    pageNum: 1,
    pageSize: 3,

})

const productstatusOptions = ref<any>([])

const pageChange = (currentPage: number, pageSize: number) => {
    pageData.pageNum = currentPage
    pageData.pageSize = pageSize
    callApi()
}


onMounted(() => {

    callApi()
    callProductStatusData()

})

const callProductStatusData = () => {
    enumApi.select({ enumClassName: "productStatus" }).then((res: any) => {

        res = [{ code: 0, message: "全部" }].concat(res)
        productstatusOptions.value = res
    })
}



const callApi = () => {
    let params: any = {}
    params.categoryId = formData.categoryId != "" ? formData.categoryId : undefined
    params.name = formData.name != "" ? formData.name : undefined
    params.status = formData.status != 0 ? formData.status : undefined
    params.pageNum = pageData.pageNum
    params.pageSize = pageData.pageSize
    productApi.select(params).then((res: any) => {
        pageData.total = res.total
        tableData.value = res.items
    })
}

const onsubmit = () => {
}

const editClick = (row: any) => {
    router.push({ name: "product-edit", query: { id: row.id } })
}

const deleteClick = (row: any) => {
     ElMessageBox.confirm(
    '你确认要删除 '+row.name+' 吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      productApi.delete({ id: row.id }).then((res: any) => {
        ElMessage.success("删除成功")
       callApi
      })
    })
    .catch(() => {
     
    })
}
</script>